<template>
  <div class="container">
    <div class="weui_cells_title">住院号：</div>
    <div class="weui_cells weui_cells_access" style="margin-top:10px;">
      <a @click="selectWard" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-credit-card-alt fa-2x icon-color" style="width:45px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>{{ward?ward.name:''}}</p>
          <p>{{ward?ward.num:''}}</p>
        </div>
        <div class="weui_cell_ft">
          选住院号
        </div>
      </a>
    </div>
    <div class="weui_cells_title" v-show="showEmpty">{{emptyMsg}}</div>
    <div v-show="showPrepay" class="weui_cells" style="margin-top:10px;">
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">入院日期</span>
            <span class="info">{{inDate}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">费用类别</span>
            <span class="info">{{payType}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">住院科室</span>
            <span class="info">{{deptName}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">护理组</span>
            <span class="info">{{nurseDeptName}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">住院天数</span>
            <span class="info">{{dayCount}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">床位号</span>
            <span class="info">{{bed}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">费用总金额</span>
            <span class="info">{{totalAmt}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">押金总金额</span>
            <span class="info">{{depositAmt}}</span>
          </p>
        </div>
      </div>
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <p>
            <span class="label">预缴金余额</span>
            <span class="info">{{availableAmt=='unknown'?'未知':availableAmt+'元'}} </span>
          </p>
        </div>
      </div>
    </div>
    <a v-show="showPrepay && availableAmt != 'unknown' && !outDate" @click="doPrepay" href="javascript:;" style="margin:10px 8px;" class="weui_btn weui_btn_primary">缴纳住院预缴金</a>
    <div v-show="showPrepay" class="weui_cells_title">每日费用列表</div>
    <div v-show="showPrepay" class="weui_cells weui_cells_access" style="margin-top:10px;">
      <a v-for="bill in bills" @click="goBill($index)" class="weui_cell" href="javascript:;">
        <div class="weui_cell_hd">
          <i class="fa fa-hospital-o icon-color" style="width:20px;margin-right:5px;display:block;"></i>
        </div>
        <div class="weui_cell_bd weui_cell_primary">
          <p>日期：<span class="am-ft-blue">{{bill.billDate}}</span></p>
          <p>费用：<span class="am-ft-blue">{{bill.costed}} 元</span></p>
        </div>
        <div class="weui_cell_ft">
        </div>
      </a>
    </div>
    <partial name="footer-copyright"></partial>
  </div>
</template>
<style scoped>
.blue_tag {
  background-color: #0ae;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.orange_tag {
  background-color: #ff8208;
  color: #fff;
  font-size: 13px;
  padding: 2px 4px;
  border: none;
  vertical-align: middle;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

span.label {
  display: inline-block;
  width: 100px;
}

span.info {
  color: #0ae;
}
</style>
<script>
import _ from 'underscore'

export default {
  name: 'GetInpatientView',
  data: function () {
    return {
      showEmpty: false,
      emptyMsg: '',
      showPrepay: false,
      inDate: '',
      outDate: '',
      deptName: '',
      nurseDeptName: '',
      dayCount: '',
      bed: '',
      totalAmt: '',
      depositAmt: '',
      payType: '',
      availableAmt: 'unknown',
      flowNo: '',
      bills: []
    }
  },
  vuex: {
    getters: {
      ward: ({ ward }) => _.findWhere(ward.wards, { isSelected: true })
    }
  },
  methods: {
    selectWard: function () {
      this.$router.go({ name: 'selectWard' })
    },
    getInpatient: function () {
      if (!this.ward) {
        return
      }
      var self = this

      this.$ajax.get('GetInpatient', 'Inpatient', {
        wardId: this.ward.id
      }).then(function (data) {
        if (data.ResultCode !== '0') {
          self.showEmpty = true
          self.emptyMsg = data.ResultMsg
        } else {
          self.showPrepay = true

          self.inDate = data.InDate
          self.outDate = data.OutDate
          self.deptName = data.DeptName
          self.nurseDeptName = data.NurseDeptName
          self.dayCount = data.DayCount
          self.bed = data.Bed
          self.totalAmt = data.TotalAmt
          self.depositAmt = data.DepositAmt
          self.availableAmt = data.AvailableAmt
          self.payType = data.PayType
          self.flowNo = data.FlowNo
          self.bills = _.map(data.WardDayAmtList, function (val) {
            return {
              billDate: val.BillDate,
              costed: val.Amt
            }
          })
        }
      })
    },
    goBill: function (idx) {
      var bill = this.bills[idx]
      var billDate = bill.billDate
      var feeAmt = bill.costed
      this.$router.go({ name: 'getInpatientBill', query: { flowNo: this.flowNo, billDate: billDate, feeAmt: feeAmt } })
    },
    doPrepay: function () {
      this.$router.go({ name: 'doPrepay' })
    }
  },
  ready: function () {
    this.$watch('ward', function (val) {
      this.getInpatient()
    })

    this.getInpatient()
  }
}
</script>
